<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="header-title">修改地址</view>
		</view>

		<!-- 地址编辑表单 -->
		<view class="address-form">
			<view class="form-item">
				<view class="label">收货人姓名:</view>
				<input type="text" v-model="addressInfo.receiverName" placeholder="请输入收货人姓名" />
			</view>
			<view class="form-item">
				<view class="label">手机号码:</view>
				<input type="text" v-model="addressInfo.receiverMobile" placeholder="请输入手机号码" />
			</view>
			<view class="form-item">
				<view class="label">所在地区:</view>
				<input type="text" v-model="addressInfo.location" placeholder="请输入所在地区" />
			</view>
			<view class="form-item">
				<view class="label">详细地址:</view>
				<input type="text" v-model="addressInfo.detailedAddress" placeholder="请输入详细地址" />
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @click="confirmModify">
			<text>确认修改</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressId: null, // 用于存储从上一个页面传递过来的 addressId
				addressInfo: {
					receiverName: '', // 收货人姓名
					receiverMobile: '', // 手机号码
					location: '', // 所在地区
					detailedAddress: '' // 详细地址
				} // 存储地址信息
			};
		},
		onLoad(options) {
			this.addressId = options.addressId; // 获取传递过来的 addressId
			this.fetchAddressInfo();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 获取地址信息
			fetchAddressInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: `http://localhost:8080/address/address/${this.addressId}`,
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.statusCode === 200) {
							this.addressInfo = res.data.data; // 假设返回的数据就是地址信息
						} else {
							uni.showToast({
								title: '获取地址信息失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('请求出错:', err);
						uni.showToast({
							title: '请求出错',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			// 确认修改地址信息
			confirmModify() {
				uni.showLoading({
					title: '正在修改...'
				});
				uni.request({
					url: "http://localhost:8080/address/address/", // 接口地址
					method: "PUT", // 请求方法
					data: {
						addressId: this.addressId,
						receiverName: this.addressInfo.receiverName,
						receiverMobile: this.addressInfo.receiverMobile,
						location: this.addressInfo.location,
						detailedAddress: this.addressInfo.detailedAddress
					},
					header: {
						'Content-Type': 'application/json',
						'Authorization': uni.getStorageSync('token')
					},
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							uni.showToast({
								title: "修改成功",
								icon: "success"
							});
						} else {
							uni.showToast({
								title: "服务器返回错误",
								icon: "none"
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error("请求失败", err);
						uni.showToast({
							title: "请求失败",
							icon: "none"
						});
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		background-color: #f8f8f8;
		color: #333;
		font-size: 14px;
	}

	/* 头部导航栏 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.header-title {
		font-size: 16px;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	/* 地址编辑表单 */
	.address-form {
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
		margin: 15px;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.label {
		width: 100px;
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}

	input[type="text"] {
		flex: 1;
		border: 1px solid #ddd;
		padding: 10px;
		border-radius: 4px;
		outline: none;
	}

	/* 提交按钮 */
	.submit-btn {
		position: fixed;
		bottom: 20px;
		left: 20px;
		right: 20px;
		background-color: #e44d26;
		color: #fff;
		text-align: center;
		padding: 12px;
		border-radius: 5px;
		font-size: 16px;
	}
</style>
